<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import { useAgentConsumptionStatistics } from "./utils/hook";

defineOptions({
  name: "AdAgentConsumptionStatistics"
});

const {
  form,
  formRef,
  tableRef,
  loading,
  agents,
  dataList,
  summary,
  filterOptions,
  quickSelect,
  getRowClassName,
  selectTimeRange,
  handleDateChange,
  onSearch,
  resetForm,
  refreshData
} = useAgentConsumptionStatistics();
</script>

<template>
  <div class="main">
    <!-- 筛选表单 -->
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="投放组：" prop="department_ids">
        <el-select
          v-model="form.department_ids"
          placeholder="请选择"
          clearable
          multiple
          style="width: 200px"
        >
          <el-option
            v-for="item in filterOptions.department_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="平台：" prop="platform_ids">
        <el-select
          v-model="form.platform_ids"
          placeholder="请选择"
          clearable
          multiple
          style="width: 200px"
        >
          <el-option
            v-for="item in filterOptions.platform_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="广告计划：" prop="ad_plan_id">
        <el-select
          v-model="form.ad_plan_id"
          placeholder="请选择计划"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in filterOptions.ad_plan_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围：" prop="date_range">
        <el-select v-model="quickSelect" placeholder="选择时间" @change="selectTimeRange" style="width: 103px; border-radius: 0; border-right: 0px">
          <el-option label="今天" value="today" />
          <el-option label="昨天" value="yesterday" />
          <el-option label="最近七天" value="7day" />
          <el-option label="最近30天" value="30day" />
          <el-option label="本月" value="month" />
          <el-option label="上月" value="lastmonth" />
          <el-option label="自定义" value="diy" />
        </el-select>
        <el-date-picker
          v-model="form.date_range"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 240px; border-radius: 0px; border-left: 0; margin-left: -1px"
          @change="handleDateChange"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          查询
        </el-button>
        <el-button :icon="useRenderIcon('ri:refresh-line')" @click="resetForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <PureTableBar title="广告代理商消耗统计" @refresh="refreshData">
      <template v-slot="{ size }">
        <!-- 主表格 -->
        <el-table
          ref="tableRef"
          border
          :loading="loading"
          :size="size"
          :data="dataList"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          style="width: 100%"
          table-layout="fixed"
        >
          <el-table-column
            prop="date_formatted"
            label="日期"
            min-width="180"
            width="180"
            align="center"
            fixed="left"
            show-overflow-tooltip
          />
          <el-table-column
            v-for="agent in agents"
            :key="agent.id"
            :label="`${agent.name}(${agent.platform_text})`"
            align="center"
            min-width="140"
          >
            <template #default="{ row }">
              <span class="amount-cell">
                {{ row.agents[agent.id]?.formatted_amount || '0.00' }}
              </span>
            </template>
          </el-table-column>

          <!-- 每日总计列 -->
          <el-table-column
            label="每日总计"
            prop="daily_total"
            align="center"
            width="120"
            fixed="right"
          >
            <template #default="{ row }">
              <span class="daily-total-cell">
                {{ row.daily_total || '0.00' }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </PureTableBar>


  </div>
</template>

<style scoped lang="scss">
.search-form {
  .el-form-item {
    margin-bottom: 12px;
  }
}

.amount-cell {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 500;
  font-size: 14px;
  color: var(--el-text-color-primary);
  letter-spacing: 0.5px;
}

.summary-amount {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  font-size: 14px;
  color: var(--el-color-primary);
  letter-spacing: 0.5px;
}

.daily-total-cell {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600;
  font-size: 14px;
  color: var(--el-color-warning);
  letter-spacing: 0.5px;
}

// 确保日期列最小宽度
:deep(.el-table__fixed-left) {
  .el-table__cell {
    min-width: 180px !important;
    width: 180px !important;
  }
}

// 汇总行样式
:deep(.summary-row) {
  background: var(--el-color-primary-light-9) !important;

  td {
    font-weight: 600;
    border-top: 2px solid var(--el-color-primary) !important;
    border-bottom: 2px solid var(--el-color-primary) !important;
  }
}

// 当表格宽度过大时的滚动条样式
:deep(.el-table__body-wrapper) {
  &::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: var(--el-border-color-lighter);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--el-border-color);
    border-radius: 4px;

    &:hover {
      background: var(--el-border-color-dark);
    }
  }
}
</style>
